{% extends "map/new_base.html" %}
{% load truncate_filter %}

{% comment %}

  Detailed View page
  ------------------
  
  This page will display full details of a marker, and if the user is logged in, allow them
  to comment and rate.

{% endcomment %}

{% block javascript %}
   <script src="http://www.google.com/jsapi"></script>
   <script type="text/javascript">
      google.load("jquery", "1");
      google.load("jqueryui", "1");  
   </script>

  <link rel="stylesheet"  href="/assets/javascript/jquery.lightbox-0.5.css" type="text/css" />
  <link rel="stylesheet"  href="/assets/javascript/raterstyle.css"          type="text/css" />
  
   <script type="text/javascript" src="/assets/javascript/jquery.delay.js">        </script>
   <script type="text/javascript" src="/assets/javascript/jquery.rater.js">        </script>
   <script type="text/javascript" src="/assets/javascript/jquery.lightbox-0.5.js"> </script>
   <script type="text/javascript" src="/assets/javascript/detailview.js">          </script>
   



    
   
   {% if stars_writable %}
     <script type="text/javascript">
       $(function() {
          $('#mrater{{marker.id}}').rater({ postHref: '/mstars',rating: {{marker.rating_out_of_five}} });
        });
      </script>
   {% endif %}
   

     <script>
        // Nasty hack to get the redirect to work and keep things looking tidy.
        window.onload=function(){
        var e = document.getElementById("com_next");
        var v = window.location.href;
        v = v.split('?')[0];
        e.value = v;
        }
     </script>
 

{% endblock %}



{% block title %}
  Potton Online  |  {{marker.name}}
{% endblock %}



{% block page_middle %}

<div id="markertitle"  >
<div id="mrater{{marker.id}}" style="float: right;"> 
  <div class="stat">
    <div class="ui-rater">
      <div class="ui-rater-starsOff"  style="width: 90px;">
        <div class="ui-rater-starsOn" style="width: {{width}}px;">
        </div>
      </div>
    </div>
       <span style="clear: both;">
  {% if marker.rateable %}
  Rated: {% ifequal marker.rating_out_of_five None %}0{% else %}{{marker.rating_out_of_five|floatformat:"-2"}}{% endifequal %} 
  from a total of <span class="ui-rater-rateCount">{% ifequal marker.total_rates None %}0{% else %}{{marker.total_rates|floatformat}}{% endifequal %}</span>
  {% endif %}
  </span>
  </div>
</div>
    <h1> {{ marker.name }} </h1>
    {% if marker.public_phone %} <h2> Phone:  {{ marker.public_phone }} </h2>  {% endif %}
    <h2> {{marker.itemtype}} </h2>

</div>

<hr />

<div id="userinfo"  style="clear: both;">
    {% if marker.owner_user.first_name %}
      Added by:  {{ marker.owner_user.first_name|capfirst }} {{ marker.owner_user.last_name|capfirst }}<br />
    {% endif %}

    Last updated:  {{marker.lastupdate|date:"D d M Y" }} <br />
    {% if marker.public_email %}
      Email:  {{marker.public_email}} <br />
    {% endif %}
    {% if marker.public_email %}
      email:  <a href="mailto:{{marker.public_email}}"> {{marker.public_email}} </a> <br />
    {% endif %}
    {% if marker.date_due %}
     Date Starts:  {{ marker.date_due|date:"D d M Y" }} <br />
    {% endif %}    
    {% if marker.date_ends %}
     Date Ends:  {{ marker.date_ends|date:"D d M Y" }} <br />
    {% endif %}
</div>

<hr />

<div id="markerdescr" >
      <h4>Description</h4>
      {{marker.description|safe}}
      {% if marker.freetext %} <p>{{ marker.freetext|safe|linebreaks }}</p> {% endif %}
      <br />
      {% if marker.thumbnail %}
        <a href="{{marker.image1}}" class="lightbox"> <img src="{{marker.thumbnail}}"> </a><br />
      {% endif %}
      {% ifnotequal marker.creator None %} Creator:  {{marker.creator}} <br />{% endifnotequal %}
      {% if marker.link %} Link:  <a href="{{marker.link}}" target="_blank">{{marker.link|truncatesmart:40}}</a><span class="smalltext">&nbsp&nbsp(Link opens in a seperate browser window)</span><br />{% endif %}
      {% if marker.price %} Price:  {{marker.price}}  <br /> {% endif %}
      {% if marker.address %} Address: {{marker.address}} <br /> {% endif %}
   <hr />
</div>

<hr />

{% if marker.lat and marker.lon %}
<div id="markerlocation"  >
<h4>Location</h4>
      <div style="width: 120px; overflow: hidden; float: left;">
        <div class="fade">
          <img src="{{marker.staticmap_sm}}">
          <div>
            <img src="{{marker.staticmap_sm_sat}}">
          </div>
        </div>
      </div>
      
      <div style="width: 260px; overflow: hidden; float: left;">
        <div class="fade">
          <img src="{{marker.staticmap_me}}">
          <div>
            <img src="{{marker.staticmap_me_sat}}">
          </div>
        </div>
      </div>
      
      <div style="width: 300px; overflow: hidden; float: left;">
        <div class="fade">
          <img src="{{marker.staticmap_lg}}">
          <div>
            <img src="{{marker.staticmap_lg_sat}}">
          </div>
        </div>
      </div>
  <hr />

  <a href="http://maps.google.com/maps?daddr={{marker.lat}},{{marker.lon}}" target="_blank">Planning a visit?  Get directions to {{marker.name}}</a>  
</div>
<hr />
{% endif %}

{% ifequal user.username marker.owner_user.username %}
  <div id="markeredit" >
      <a href="{% url detail-edit marker.id %}">This is your marker.  You can EDIT it by click here. </a>
  </div>
<hr />
{% endifequal %}

{% if marker.premium %}
  <div id="merchant" style="float: left; width: 100%;" >
    {% for mobj in merchant_objects %}
      <div class="merchant_object {% cycle 'mo1' 'mo2' 'mo2' 'mo1' %}" style="width: 45%; padding: 1%; float: left;">
        <a href="{% url detail-merch marker.id mobj.id %}">{{mobj.name}} <br />
        <img src="{{mobj.thumbnail}}"> </a><br />
        {{mobj.description}} <br />
        {% if mobj.rateable %}
          <div id="srater{{mobj.id}}" style="float: right;"> 
            <div class="stat">
              <div class="ui-rater">
                <div class="ui-rater-starsOff"  style="width: 90px;">
                  <div class="ui-rater-starsOn" style="width: {{mobj.rating_width}}px;">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span style="clear: both;">
            Rated: {% ifequal marker.rating_out_of_five None %}Not Rated yet {% else %} {{marker.rating_out_of_five|floatformat:"-2"}} {% endifequal %}
            from a total of <span class="ui-rater-rateCount">{% ifequal marker.total_rates None %} {% else %} {{marker.total_rates|floatformat}} {% endifequal %}</span>
          </span>
        {% endif %}
      </div>
      {% if forloop.counter|divisibleby:"2" %} <hr /> {% endif %}
    {% endfor %}
  </div>
  <hr />
{% endif %}


{% if marker.commentable %}
<div id="comments" >
  {% load comments %}
  {% get_comment_count for marker as comment_count %}
  <h4>Comments:  {{comment_count}}</h4>
  {% get_comment_list for marker as comment_list %}

  {% for comment in comment_list %}
      <div id="{% cycle 'nr1' 'nr2' %}">
        <span style="font-weight: bold;">{{comment.user.username|capfirst}}</span><br />
        <span style="font-size: 0.7em;">{{comment.submit_date|date:" d M Y / H:m"}}</span>
      </div>
      
      <div id="{% cycle 'cr1' 'cr2' %}">
        {{comment.comment}}
      </div>
      
      <div id="{% cycle 'cv1' 'cv2' %}">
        <a title="Vote up" id="u{{comment.id}}" {% if user.is_authenticated %} class="voteup" href="/vote/" {% endif %}>
        <img style="padding-right: 5px;" id="imgu{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}&returntype=good"></a>
        <a title="Vote down" id="d{{comment.id}}" {% if user.is_authenticated %}  class="votedown" href="/vote/" {% endif %} >
        <img id="imgd{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}&returntype=bad"></a>
        <br /><span style="font-size: 0.7em;">Rating:</span>  <img title="How valid is this comment" id="imgpc{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}" />
      </div>
      
      <hr />
  {% endfor %}
</div>
<hr />
<div id="commentform" >
{% if marker.commentable %}
    <h1>Comment:</h1>
    <span style="clear: both;">
    {% get_comment_form for marker as form %}
    <form action="{% comment_form_target %}" method="POST">
                    <span class="username"><input id="id_name" type="text" name="name" value="{{user.username}}" maxlength="50" /></span>
                    <span class="username"><input id="com_next" type="text" name="next" value="pottononline" /></span>
                    {{ form.content_type }}
                    {{ form.object_pk }}
                    {{ form.timestamp }}
                    {{ form.security_hash }}
                    <textarea id="id_comment" rows="4" cols="70" name="comment" ></textarea>
                    
                    <span class="username">{{ form.honeypot}}</span>
                    <input type="submit" title="Click to submit your comment" value="Submit comment">

    {% endif %}

    </span>
  <hr />
</div>
<hr />
{% endif %}
    
{% endblock %}

{% block page_left %}
  {% include 'map/default_pageleft.html' %}
{% endblock %}

{% block page_right %}
  {% include 'map/default_pageright.html' %}
{% endblock %}
